import Base from "../base.js";
import moviesApi from "../../api/movies"

export default class extends Base {
    data = {
        movies: {
            cname: "",
            ename: "",
            type: "",
            area: "",
            time: "",
            upDate: "",
            score: "",
            count: "",
            intro: "",
            isClassic: "",
            director: "",
            actor: "",
        }

    }
    id = ""
    render() {
        const { cname, ename, type, area, time, upDate, score, count, intro, isClassic, director, actor } = this.data.movies
        this.$el.html(`
        <h1 style="text-align:center">新增电影</h1>
        <div class="layui-form"  lay-filter="formTest">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影名</label>
                <div class="layui-input-block">
                    <input type="text" value="${cname}" style="width:500px" name="cname" lay-verify="title" autocomplete="off" placeholder="请输入电影名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影英文名</label>
                <div class="layui-input-block">
                    <input type="text" value="${ename}" style="width:500px" name="ename" lay-verify="title" autocomplete="off" placeholder="请输入电影英文名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影的类型</label>
                <div class="layui-input-block">
                    <input type="text" name="type" value="${type}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入电影的类型" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影首映地区</label>
                <div class="layui-input-block">
                    <input type="text" name="area" value="${area}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入电影首映地区" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影时长</label>
                <div class="layui-input-block">
                    <input type="text" name="time" value="${time}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入电影时长" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影大陆上映时间</label>
                <div class="layui-input-block">
                    <input type="text" name="upDate" value="${upDate}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入电影大陆上映时间" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影评分</label>
                <div class="layui-input-block">
                    <input type="text" name="score" value="${score}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入电影评分" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">电影票房</label>
                <div class="layui-input-block">
                    <input type="text" name="count" value="${count}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入电影票房" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">剧情简介</label>
                <div class="layui-input-block">
                <input type="text" name="intro" value="${intro}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入剧情简介" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">是否是经典</label>
                <div class="layui-input-block">
                    <input type="text" name="isClassic" value="${isClassic}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入“是”或“否”" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">导演名字</label>
                <div class="layui-input-block">
                    <input type="text" name="director" value="${director}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入导演名字" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">演员名字</label>
                <div class="layui-input-block">
                    <input type="text" name="actor" value="${actor}" style="width:500px" lay-verify="title" autocomplete="off" placeholder="请输入演员名字" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:150px">相关电影图片</label>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2" disabled style="background-color:rgba(0,0,0,0.2) ">上传图片</button>
                </div>  
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                </div>
            </div>
         </div>
        `)
        // this.form = layui.form
        // this.form.render()
        this.saveBtn = $(".layui-btn")
        this.cancelBtn = $(".layui-btn .layui-btn-primary")
        this.imgBtn = $("#test2")
    }
    //新增电影
    async add() {
        // console.log(this.data.movies);
        if (!this.data.movies.cname) {
            alert(`请输入正确的电影名字`)
        } else {
            this.data.movies.isClassic = this.data.movies.isClassic == "是" ? "true" : "false"
            this.data.movies = await moviesApi.addMovies(this.data.movies)
            console.log(this.data.movies);

            if (this.data.movies._id) {
                var layer = layui.layer;
                layer.msg('新增电影成功，请上传电影相关图片');
                this.imgBtn.removeAttr("disabled")
                this.imgBtn.css({ background: "rgba(0,150,136)" })
            }

            // location.hash = "#/info/students"
        }
    }
    //重汇
    rerender() {
    }
    handle() {

        //给table表格中的input元素绑定input事件，用来收集用户更新之后的值
        _.forIn(this.data.movies, (value, key) => {
            // console.log(key, value)
            $(`input[name=${key}`).on("input", event =>
                // console.log(event.target.value)
                this.data.movies[key] = event.target.value
            )
        })

        this.saveBtn.on("click", () => this.add())
        this.imgBtn.on("click", e => {
            location.hash = `#/info/imgs/${this.data.movies._id}`
        })
    }
}